<template>
	
	<div style="margin-top: 15px; margin-left: -1500px;">
		<a-button type="primary" @click="showModal">Open Modal</a-button>
	</div>
	
	<div style="margin: 15px;">
		<a-modal v-model:visible="visible" width="1000px" title="Basic Modal" @ok="handleOk">
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
			<p>Some contents...</p>
		</a-modal>
	</div>
	
	<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500, y: 600 }">
		<template #bodyCell="{ column }">
			<template v-if="column.key === 'edit'">
				<a-popconfirm title="是否要进行删除?" ok-text="确认" cancel-text="取消">
					<a>编辑</a>
				</a-popconfirm>	
			</template>
			
			<template v-if="column.key === 'delete'">
				<a-popconfirm title="是否要进行删除?" ok-text="确认" cancel-text="取消">
					<a>删除</a>
				</a-popconfirm>
			</template>
		</template>
	</a-table>
	
</template>

<script>
	import { defineComponent, ref } from 'vue';
	const columns = [
		{
			title: 'Full Name',
			width: 100,
			dataIndex: 'name',
			key: 'name',
			fixed: 'left',
		}, 
		{
			title: 'Age',
			width: 100,
			dataIndex: 'age',
			key: 'age',
			fixed: 'left',
		}, 
		{
			title: 'Column 1',
			dataIndex: 'address',
			key: '1',
			width: 150,
		}, 
		{
			title: 'Column 2',
			dataIndex: 'address',
			key: '2',
			width: 150,
		}, 
		{
			title: 'Column 3',
			dataIndex: 'address',
			key: '3',
			width: 150,
		}, 
		{
			title: '',
			key: 'edit',
			fixed: 'right',
			width: 100,
		},
		{
			title: '',
			key: 'delete',
			fixed: 'right',
			width: 100,
		},
	];
	
	const data = [];
	for (let i = 0; i < 100; i++) {
		data.push({
			key: i,
			name: `Edrward ${i}`,
			age: 32,
			address: `London Park no. ${i}`,
		});
	}
	

	const visible = ref(false);
	const showModal = () => {
		visible.value = true;
	};
	const handleOk = e => {
		console.log(e);
		visible.value = false;
	};
	
	export default defineComponent({
		data() {
			return {
				data,
				columns,
				visible,
				showModal,
				handleOk,
			};
		},
	});
	
</script>